<template>
  <div class="card">
    <div class="person">
      <div><img src="@/assets/image/logo.png" alt="" /></div>
      <div>
        <div class="name">{{ info.username }}</div>
        <div class="tag">
          <img src="@/assets/image/01.png" alt="" /><img
            src="@/assets/image/02.png"
            alt=""
          /><span>{{ formatLevel(info.level) }}</span>
        </div>
        <div class="money">
          <span>总收益: ￥{{ info.all_income }}</span>
          <span>本周收益: ￥{{ info.week_income }}</span>
        </div>
      </div>
    </div>
    <div class="info">
      <div>
        <span>距离升级业绩</span><br />
        <span>+{{ info.dis_money }}</span>
      </div>
      <div>
        <span>直推人数要求</span><br />
        <span>+{{ info.push_num }}/{{ info.level_num }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "card",
  data() {
    return {
      info: {
        username: "您好",
        level: 1,
        all_income: 0,
        week_income: 0,
        dis_money: 0,
        push_num: 0,
        level_num: 0
      }
    };
  },
  methods: {
    formatLevel(level) {
      switch (level) {
        case 1:
          return "一星用户";
        case 2:
          return "二星会员";
        case 3:
          return "三星贵宾";
        case 4:
          return "铂金至尊";
        case 5:
          return "推广大使";
        case 6:
          return "大区经理";
        case 7:
          return "大区总监";
      }
    },
    getInfo() {
      this.$ajax
        .post(this.$api.personalInfo, false, false)
        .then(res => {
          this.info = res.data;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="stylus">
.card{
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin 37px 24px 0 24px;
  color #fff;
  background #ffffff;
  .person{
    margin-bottom: 2px;
    background: -webkit-linear-gradient(#3198d4, #317EB9); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#3198d4, #317EB9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#3198d4, #317EB9); /* Firefox 3.6 - 15 */
    background: linear-gradient(#3198d4, #317EB9); /* 标准的语法（必须放在最后） */
    border-radius:16px 16px 0 0;
    padding 19px 22px 26px 22px;
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    >div{
      &:first-child{
        margin-right 20px;
      }
      img{
        width: 144px;
      }
      .tag{
        line-height 52px
        position relative
        img{
          height 24px;
          width auto
        }
        span{
          position absolute
          left 35px
          top: 50%
          transform translate(0, -50%)
          font-size 18px;
          font-family:PingFang-SC-Regular;
          font-weight:bold;
        }
      }
      .name{
        line-height 52px;
        font-size:26px;
        font-family:PingFang-SC-Regular;
        font-weight:bold;
      }
      .money{
        line-height 52px;
        font-size:22px;
        font-family:PingFang-SC-Regular;
        font-weight:bold;
        span{
          &:first-child{
            display inline-block;
            margin-right 84px;
          }
        }
      }
    }

  }
  .info{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    text-align center;
    >div{
      padding 22px;
      background: -webkit-linear-gradient(#317EB9, #3070aa); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#317EB9, #3070aa); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#317EB9, #3070aa); /* Firefox 3.6 - 15 */
      background: linear-gradient(#317EB9, #3070aa); /* 标准的语法（必须放在最后） */
      -webkit-box-flex: 1;  /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;     /* OLD - Firefox 19- */
      -webkit-flex: 1;      /* Chrome */
      -ms-flex: 1;          /* IE 10 */
      flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
      &:first-child{
        margin-right 2px;
      }
      span{
        font-size:24px;
        font-family:PingFang-SC-Regular;
        font-weight:bold;
        &:first-child{
          font-size:18px;
          font-family:PingFang-SC-Regular;
          font-weight:bold;
        }
      }
    }
  }
}
</style>
